<template>
	<view class="pwd">
		<!-- TODO修改密码 -->
		<!-- u-form 的源码插件只支持对象属性的验证 -->
		<u--form :model="formData" ref="uForm" :rules="rules" 
		labelPosition="top" labelWidth="auto"
			:labelStyle="{fontWeight:'bold',marginBottom:'20rpx'}">
			<u--text text="姓名"></u--text>
			<u-form-item  prop="name" name="name">
				<u--input v-model="formData.name" placeholder="请输入姓名" border="surround" readonly="readonly"></u--input>
			</u-form-item>
			<u--text text="学号/工号"></u--text>
			<u-form-item  prop="sid" name="sid">
				<u--input v-model="formData.sid" placeholder="请输入学号/工号" border="surround" readonly="readonly"></u--input>
			</u-form-item>
			<u--text text="专业"></u--text>
			<u-form-item  prop="major" name="major">
				<u--input v-model="formData.major" placeholder="请输入姓名" border="surround" readonly="readonly"></u--input>
			</u-form-item>
			<u--text text="所在学院"></u--text>
			<u-form-item  prop="phone" name="college">
				<u--input v-model="formData.college" placeholder="请输入所在学院" border="surround" readonly="readonly"></u--input>
			</u-form-item>
			<u--text text="班别"></u--text>
			<u-form-item  prop="classname" name="classname">
				<u--input v-model="formData.classname" placeholder="请输入班别" border="surround" readonly="readonly"></u--input>
			</u-form-item>
			<u--text text="本人电话"></u--text>
			<u-form-item  prop="phone" name="phone">
				<u--input v-model="formData.phone" placeholder="请输入本人电话" border="surround" readonly="readonly"></u--input>
			</u-form-item>
			
			<u--text text="所在校区"></u--text>
			<u-form-item name="source"  prop="source">
				<u-radio-group v-model="formData.source" placement="col">
					<!--:label是你要显示的，:name是真正的值  -->
					<u-radio activeColor="green" :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist4"
						:key="index" :label="item.name" :name="item.value" ></u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u--text text="出入权限"></u--text>
			<u-form-item name="accessType"  prop="accessType">
				<u-radio-group v-model="formData.accessType" placement="col">
					<!--:label是你要显示的，:name是真正的值  -->
					<u-radio activeColor="green" :customStyle="{marginBottom: '8px'}" 
					v-for="(item, index) in radiolist9"
						:key="index" :label="item.name" :name="item.value" ></u-radio>
				</u-radio-group>
			</u-form-item>
			<u--text text="出发地"></u--text>
			<u-form-item name="access" prop="access">
				<u--input v-model="formData.access" placeholder="请输入出发地" border="surround" clearable></u--input>
			</u-form-item>
			<u--text text="目的地"></u--text>
			<u-form-item name="destination" prop="destination">
				<u--input v-model="formData.destination" placeholder="请输入目的地" border="surround" clearable></u--input>
			</u-form-item>
			
			<u--text text="出行方式"></u--text>
			<u-form-item name="travelType" prop="travelType">
				<u--input v-model="formData.travelType" placeholder="请输入出行方式" border="surround" clearable></u--input>
			</u-form-item>
			<u--text text="开始时间"></u--text>
			<u-form-item name="startTime" prop="startTime">
				<uni-datetime-picker v-model="formData.startTime" />
			</u-form-item>
			<u--text text="结束时间" ></u--text>
			<u-form-item name="endTime" prop="endTime">
				<uni-datetime-picker v-model="formData.endTime" />
			</u-form-item>
			
			<u--text text="申请理由"></u--text>
			<u-form-item name="reason" prop="reason">
				<u--input v-model="formData.reason" placeholder="请输入理由" border="surround" clearable></u--input>
			</u-form-item>
			<u--text text="审批人"></u--text>
			<u-form-item name="approver">
				<u--input v-model="formData.approver" placeholder="" border="surround" clearable></u--input>
			</u-form-item>
		</u--form>
		<view class="btn" @click="submit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					id:0,
					name:"",
					sid: "",
					college:"",
					major:"",
					sex:"",
					classname:"",
					phone:"",
					access:"",
					accessType:"",
					source:"",
					destination:"",
					travelType:"",
					reason:"",
					startTime:"",
					endTime:"",
					approver:"",
				},
				// 接口的数据
				radiolist4: [{
						name: '机场路校区',
						disabled: false,
						value: '机场路校区'
					},
					{
						name: '白云机场校区',
						disabled: false,
						value : '白云机场校区'
					},
					{
						name: '花都赤坭校区',
						disabled: false,
						value :'花都赤坭校区'
					}
				],
				radiolist9: [{
						name: '只出',
						disabled: false,
						value:'只出'
					},
					{
						name: '只入',
						disabled: false,
						value :'只入',
					},
					{
						name: '出入',
						disabled: false,
						value :'出入',
					}
				],
				rules: {
					'source': {
						// type: 'number',
						type: 'string',
						required: true,
						// 上面两个都会校验只要一个不满足就会提示message 不为数字类型 没填（为空） 都会提示
						message: '请填写所在校区',
						trigger: ['blur']
					},
					'accessType': {
						// type: 'number',
						type: 'string',
						required: true,
						// 上面两个都会校验只要一个不满足就会提示message 不为数字类型 没填（为空） 都会提示
						message: '请选择出入类型',
						trigger: ['blur']
					},
					'access': {
						// type: 'number',
						type: 'string',
						required: true,
						// 上面两个都会校验只要一个不满足就会提示message 不为数字类型 没填（为空） 都会提示
						message: '请填写出发地',
						trigger: ['blur']
					},
					'destination': {
						// type: 'number',
						type: 'string',
						required: true,
						// 上面两个都会校验只要一个不满足就会提示message 不为数字类型 没填（为空） 都会提示
						message: '请填写目的地',
						trigger: ['blur']
					},
					'travelType': {
						// type: 'number',
						type: 'string',
						required: true,
						// 上面两个都会校验只要一个不满足就会提示message 不为数字类型 没填（为空） 都会提示
						message: '请选择出行方式',
						trigger: ['blur']
					},
					'reason': {
						// type: 'number',
						type: 'string',
						required: true,
						// 上面两个都会校验只要一个不满足就会提示message 不为数字类型 没填（为空） 都会提示
						message: '请填写原因',
						trigger: ['blur']
					},
					'startTime': {
						// type: 'number',
						type: 'string',
						required: true,
						// 上面两个都会校验只要一个不满足就会提示message 不为数字类型 没填（为空） 都会提示
						message: '请选择开始时间',
						trigger: ['blur']
					},
					'endTime': {
						// type: 'number',
						type: 'string',
						required: true,
						// 上面两个都会校验只要一个不满足就会提示message 不为数字类型 没填（为空） 都会提示
						message: '请填写结束时间',
						trigger: ['blur']
					}
				},
			}
		},
		created() {
			this.formData.id=uni.getStorageSync("id")
			this.formData.name=uni.getStorageSync("userinfo").username
			this.formData.sex=uni.getStorageSync("userinfo").sex
			this.formData.sid=uni.getStorageSync("userinfo").sid
			this.formData.classname=uni.getStorageSync("userinfo").classname
			this.formData.phone=uni.getStorageSync("userinfo").phone
			this.formData.approver=uni.getStorageSync("userinfo").teacher
			this.formData.major=uni.getStorageSync("userinfo").major
			this.formData.college=uni.getStorageSync("userinfo").college
			console.log(this.formData.major)
		},
		methods: {
			submit() {
				// 1.ref 配合 2.this.$refs.xx.....检验表单是否填写完 2.validateField()对某个字段校验 3.validate()校验所有字段
					this.$refs.uForm.validate().then(res => {
						uni.$u.toast('校验通过')
						this.getApply()
					}).catch(errors => {
						// uni.$u.toast('请完整填写所有内容')
						// 信息提示框
						uni.showToast({
							icon: 'error',
							title: '请完整填写所有内容',
					
						})
					})
				
			},
			// 2.提交请假申请
			getApply() {
				uni.request({
					url:"http://localhost:8090/leave",
					method:"POST",
					data:this.formData,
					success: (res) => {
						console.log(res)
						if(res.data.code==1){
						// 提示用户添加信息成功
						uni.$u.toast('申请成功')
						setTimeout(()=>{
							uni.navigateTo({
								url:"../apply/applyingWindows"
							})
						}
						,1000)
						}else{
							let msg =res.data.message
							uni.$u.toast(msg)
						}
					}
				})
			},

		},
		onLoad() {
			
		}
	}
</script>

<style lang="scss">
	.pwd {
		padding: 20rpx;

		.btn {
			height: 100rpx;
			border-radius: 10rpx;
			background-color: #1269db;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			margin-top: 20rpx;
		}

	}
</style>
